import { FC, useEffect, useState } from "react";
import { Dropdown, Menu, Form, Modal, Input, message, Button, Col } from "antd";

import "./index.scss";
import { RouteComponentProps, withRouter } from "react-router-dom";
import http from "../http";

interface Ivalue {
  oldPwd: string;
  newPwd: string;
}

const Header: FC<RouteComponentProps> = (props) => {
  const [username, setUsername] = useState("");
  const [out, setOut] = useState(false);
  const [modify, setModify] = useState(false);
  const [form] = Form.useForm();
  useEffect(() => {
    if (localStorage.getItem("userInfo")) {
      const userInfo = JSON.parse(localStorage.getItem("userInfo") as string);
      setUsername(userInfo.username);
    } else {
      props.history.push("login");
    }
  }, [props.history]);
  const loginOut = () => {
    localStorage.removeItem("userInfo");
    props.history.push("/login");
  };

  const menu = () => {
    return (
      <Menu>
        <Menu.Item key="user">个人中心</Menu.Item>
        <Menu.Item key="modify" onClick={() => setModify(true)}>
          修改密码
        </Menu.Item>
        <Menu.Item key="loginOut" onClick={() => setOut(true)}>
          退出登录
        </Menu.Item>
      </Menu>
    );
  };

  const modifyPwd = (values: Ivalue) => {
    http.get("modifyPwd.json", values).then((res: any) => {
      if (res.resCode === "000000") {
        message.success({
          content: res.resMsg,
        });
        setModify(false);
        form.resetFields();
      } else {
        message.error({
          content: res.resMsg || "修改失败",
        });
      }
    });
  };

  return (
    <div className="layout-header">
      <div className="web-name">星火管理平台</div>
      <div className="user">
        <Dropdown trigger={["click"]} overlay={menu}>
          <div className="user-select">
            <span>
              <img
                src="https://img0.baidu.com/it/u=3816163192,1135025718&fm=26&fmt=auto&gp=0.jpg"
                alt="user"
                style={{
                  width: "30px",
                  borderRadius: "50%",
                  marginRight: "10px",
                }}
              />
            </span>
            <span>您好,{username}</span>
          </div>
        </Dropdown>
        <Modal
          title="提示"
          visible={out}
          keyboard={false}
          maskClosable={false}
          width={300}
          okText="确认"
          cancelText="取消"
          onOk={loginOut}
          className="login-out"
          onCancel={() => setOut(false)}
        >
          <div className="content">
            <span>确认退出？</span>
          </div>
        </Modal>
        <Modal
          title="修改密码"
          visible={modify}
          keyboard={false}
          maskClosable={false}
          width={300}
          onCancel={() => {
            form.resetFields();
            setModify(false);
          }}
          className="modify"
          footer=""
        >
          <Form
            form={form}
            name="normal_login"
            className="login-form"
            onFinish={modifyPwd}
          >
            <Form.Item
              name="oldPwd"
              label="原密码"
              rules={[{ required: true, message: "请输入原密码!" }]}
            >
              <Input placeholder="请输入原密码" />
            </Form.Item>
            <Form.Item
              name="newPwd"
              label="新密码"
              rules={[{ required: true, message: "请输入新密码!" }]}
            >
              <Input type="password" placeholder="请输入新密码" />
            </Form.Item>
            <Form.Item
              name="again"
              label="确认密码"
              rules={[{ required: true, message: "请再次确认密码!" }]}
            >
              <Input type="password" placeholder="请再次确认密码" />
            </Form.Item>
            <Col className="footer">
              <Button
                onClick={() => {
                  form.resetFields();
                  setModify(false);
                }}
              >
                取消
              </Button>
              <Button htmlType="submit" type="primary">
                确定
              </Button>
            </Col>
          </Form>
        </Modal>
      </div>
    </div>
  );
};

export default withRouter(Header);
